<template>
  <el-card body-style="min-height: 86vh">
    <!-- 搜索 -->
    <el-form :model="searchForm">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="收支项目">
            <el-input v-model="searchForm.projectName" placeholder="请输入收支项目"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="日期">
            <el-date-picker
              v-model="searchForm.time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button @click="handleRestSearch()">重置</el-button>
            <el-button type="primary" @click="handleGetTableList()">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider />
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-between">
      <div>
        <el-button type="primary" @click="handleCreate()">新增</el-button>
        <el-button type="primary" @click="handleShowReport">生成报表</el-button>
      </div>
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <el-table :data="tableData">
      <el-table-column
        label="收支项目"
        prop="projectName"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column label="客户姓名" prop="name" width="120" align="center"></el-table-column>
      <el-table-column label="联系方式" prop="phone" width="120" align="center"></el-table-column>
      <el-table-column
        label="车牌号"
        prop="cardNumber"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        label="结算方式"
        prop="payMoney"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column label="金额" prop="money" width="100" align="center"></el-table-column>
      <el-table-column
        label="收支类型"
        prop="projectType"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column label="收支日期" prop="payDate" width="120" align="center"></el-table-column>
      <el-table-column label="备注" prop="remark" width="280" align="center"></el-table-column>
      <el-table-column label="操作" width="180" align="center" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" @click="handleEdit(row)">修改</el-button>
          <el-popconfirm title="确定删除该条记录？" width="180">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      class="flex justify-center mt-2"
      background
      layout="total,prev, pager, next"
      :current-page="currentPage"
      :page-size="limit"
      :total="total"
      @current-change="handleGetTableList"
    />
    <!-- 新增编辑弹框 -->
    <form-drawer ref="formDrawerRef">
      <el-form :model="form" label-width="120">
        <el-form-item label="收支项目">
          <el-input v-model="form.projectName" placeholder="请输入收支项目"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名">
          <el-input v-model="form.name" placeholder="请输入客户姓名"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="form.phone" placeholder="请输入联系方式"></el-input>
        </el-form-item>
        <el-form-item label="车牌号">
          <el-input v-model="form.cardNumber" placeholder="请输入车牌号"></el-input>
        </el-form-item>
        <el-form-item label="结算方式">
          <el-select v-model="form.payMoney">
            <el-option label="微信" value="1"></el-option>
            <el-option label="支付宝" value="2"></el-option>
            <el-option label="现金" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="金额">
          <el-input v-model="form.money" type="number" placeholder="请输入金额"></el-input>
        </el-form-item>
        <el-form-item label="收支类型">
          <el-select v-model="form.projectType">
            <el-option label="收入" value="1"></el-option>
            <el-option label="支出" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收支日期">
          <el-date-picker
            v-model="form.payDate"
            type="datetime"
            placeholder="请选择日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
    </form-drawer>
    <!-- 报表 -->
    <form-dialog ref="formDialogReportRef" title="报表" top="5vh" width="90%" :isButton="false">
      <div ref="chartRef" class="w-full h-[600px]"></div>
    </form-dialog>
  </el-card>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import type { Ref } from "vue";
import { useInitForm, useInitTable } from "@/hooks/useCommon";
import useEcharts from "@/hooks/useEcharts";
import FormDrawer from "@/components/FormDrawer.vue";
import FormDialog from "@/components/FormDialog.vue";
import { getRoleListApi } from "@/api/user";
const tableData = [
  {
    projectName: "服务项目",
    name: "lucas",
    phone: "15727765574",
    cardNumber: "赣A09382",
    payMoney: "现金",
    money: "120",
    projectType: "收入",
    payDate: "2023-05-21",
    remark: "test"
  }
];
//表格
const { searchForm, currentPage, limit, total, handleRestSearch, handleGetTableList } =
  useInitTable({
    searchForm: {
      projectName: ""
    },
    getTableList: getRoleListApi
  });

// 新增编辑
const { formDrawerRef, form, handleCreate, handleEdit } = useInitForm({
  form: {
    projectName: "",
    name: "lucas",
    phone: "15727765574",
    cardNumber: "赣A09382",
    payMoney: "现金",
    money: "120",
    projectType: "收入",
    payDate: "2023-05-21",
    remark: "test"
  }
});

// 报表
const formDialogReportRef = ref(null);
const handleShowReport = () => {
  (formDialogReportRef.value as any)?.open();
};
// echarts
const chartRef = ref<HTMLDivElement | null>(null);
const handleEcharts = () => {
  const { setOptions } = useEcharts(chartRef as Ref<HTMLDivElement>);
  setOptions({
    tooltip: {},
    legend: {
      data: ["收支"]
    },
    xAxis: {
      data: ["服务项目", "水费", "电费", "房租", "其他"]
    },
    yAxis: {},
    series: [
      {
        name: "收支",
        type: "bar",
        data: [15000, 50, 500, 3000, 1000]
      }
    ]
  });
};

watch(
  () => chartRef.value,
  (newVal) => {
    newVal && handleEcharts();
  },
  {
    immediate: true
  }
);
</script>
<style scoped lang="scss"></style>
